import { Tag, Dialog, Overlay, Button, Selector, Form, SubmitBar } from 'react-vant';
import styles from './order.module.css'
import { useNavigate } from 'react-router-dom';
// import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useMap, useThrottleFn } from 'ahooks'
import { addList, jianList,addDai } from '../../redux2/modules/cart'
import React, { useEffect, useMemo, useRef, useState } from 'react'
const Order = () => {
    const navigate = useNavigate()

    // 取餐方式控制变量
    const [way, setWay] = useState(0)

    // 备注
    const [mark, setMark] = useState('口味、偏好等要求')

    // 备注弹窗可见
    const [markVisible, setMarkVisible] = useState(false)

    // 餐具数量
    const [table, setTable] = useState('')
    const dispatch = useDispatch()
    const history = useSelector((store) => store.carts.historyList)
    const ids = useSelector((store) => store.carts.ids)
    const sum = useMemo(() => {
        let sum = 0
        history.forEach(item => {
            sum += item.price * item.counts
        })
        return sum
    })
    const cha = useMemo(() => {
        return 20 - sum
    })
    const handTi=()=>{
        dispatch(addDai({mark:mark,table:table}))
    }
    return (
        <div className={styles.body}>
            {/* 顶部 */}
            <div className={styles.top}>
                <img src="/order1.svg" alt="" onClick={() => navigate(-1)} />
                <p><b style={{ color: 'white' }}>提交订单</b></p>
            </div>


            {/* 取餐方式 */}
            <div className={styles.way}>
                <div className={styles.top}>
                    <div className={way == 0 ? styles.left : styles.right} onClick={() => setWay(0)}>
                        <b>外卖配送</b>
                    </div>
                    <div className={way == 1 ? styles.left : styles.right} onClick={() => setWay(1)}>
                        <b>到店自取</b>
                    </div>
                </div>

            </div>



            {/* 商品 */}
            <div className={styles.shop}>
                {/* 店名 */}
                <b>华莱士-凤凰广场2店</b>
                {/* 商品 */}
                {
                    history.map((item, index) => {
                        return (
                            <div className={styles.food}>
                                <img src="/kl.svg" alt="" />
                                <div className={styles.right}>
                                    <div className={styles.bot}>
                                        <span>{item.name}</span>
                                        <b>￥{item.price}</b>
                                    </div>
                                    <div className={styles.bot}>
                                        <b>×{item.counts}</b>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }


            </div>



            {/* 价格计算 */}
            <div className={styles.price}>
                <p>
                    <span>商品总价</span><b>￥{sum}</b>
                </p>
                <p>
                    <span>打包费</span><b>￥2</b>
                </p>
                <p>
                    <span>配送费</span><b>￥4</b>
                </p>
                <p>
                    <span><Tag color='#ff644d'>减</Tag>店铺满减</span><b className={styles.b1}>-￥4</b>
                </p>
                <p>
                    <span><img src="/red.svg" alt="" /> 平台红包</span><b className={styles.b1}>￥4<img src='/right.svg' /> </b>
                </p>
                <p>
                    <span><Tag color='#ff644d'>券</Tag>商家代金券</span><b className={styles.b1}>￥4<img src='/right.svg' /></b>
                </p>
                <p>
                    已优惠12元
                </p>
            </div>

            {/* 备注和餐具 */}
            <div className={styles.mark}>
                <p onClick={() => setMarkVisible(true)}>
                    <span>备注</span><span className={styles.s1}

                    >{mark}<img src='/right.svg' /></span>
                </p>
                <div>
                    <span>餐具数量</span>
                    <Selector
                        options={[
                            {
                                label: '商家按餐量提供',
                                value: '商家按餐量提供',
                            },
                            {
                                label: '一份',
                                value: '一份',
                            },
                            {
                                label: '无需餐具',
                                value: '无需餐具',
                            },
                        ]}
                        onChange={(arr) => setTable(arr)}
                    />

                </div>
                {/* 备注弹窗 */}
                <Overlay visible={markVisible}
                    style={{
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}>
                    <div style={{ width: '3rem', height: '3rem', backgroundColor: '#fff', borderRadius: 4 }}>
                        <textarea cols={30} rows={10} placeholder='填写备注...' value={mark} onChange={(v) => setMark(v.target.value)}></textarea>
                        <Button color='linear-gradient(to right,#FF9901,#FF654D)' round style={{ margin: '.1rem .2rem' }} onClick={() => {
                            setMark('口味、偏好等要求')
                            setMarkVisible(false)
                        }}>取消</Button>
                        <Button color='linear-gradient(to right,#FF9901,#FF654D)' round onClick={() => setMarkVisible(false)}>确定</Button>
                    </div>
                </Overlay>

                {/* 订单底部 */}
                <SubmitBar price={(sum-12)*100} buttonText="提交订单" onSubmit={()=>{handTi();
                }}/>
            </div>
        </div>
    )
}

export default Order;


